<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<title>Defiant.js</title>
<style type="text/css">

body {
	background: #ddd;
}

.arrow {
	background: rgba(30,100,200,0.15);
	position: absolute;
	width: 100px;
	height: 30px;
	z-index: 2;
}
.arrow:after {
	content: '';
	position: absolute;
	top: -15px;
	left: 100%;
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 30px solid rgba(30,100,200,0.15);
}
.json-to-xml {
	top: 42%;
	left: 45%;
}

pre {
	background: #fff;
	margin: 0px;
	position: absolute;
	top: 1%;
	bottom: 1%;
	width: 48.75%;
	border: #ccc 1px solid;
	border-radius: 5px;
	font-size: 1.35em;
	line-height: 1.25em;
	overflow: auto;
}

#j-output {
	color: #933;
	left: 0.75%;
}
#x-output {
	color: #888;
	right: 0.75%;
}

</style>
<script type="text/javascript" src="../dist/defiant.min.js"></script>
</head>
<body>

<span class="arrow json-to-xml"></span>

<pre id="x-output"></pre>
<pre id="j-output"></pre>

<script type="text/javascript">

// development flag
defiant.env = 'development';

var test = {
	init: function(data) {
		var start = Date.now(),
			found = defiant.search(data, '//*[@price]');

		//console.log( Date.now() - start );
		//console.log( found.length );
		console.log( defiant.json.search.map );
	}
};

</script>
<!-- Load JSON structure -->
<script type="text/javascript" src="./tmp.js"></script>


</body>
</html>
